Todo List專案–基礎功能實作

今天我將開始實作一個基礎的Todo List專案。主要目的是讓使用者能夠在輸入框中輸入待辦事項，點擊新增按鈕後，將事項添加到清單中顯示。這個項目將讓我們學習如何利用JavaScript操作DOM元素、處理事件以及進行基本的功能實作。

先建立 HTML 結構，其中包含標題、輸入框、新增按鈕，以及一個待辦事項顯示區域。

<h1>Todo List</h1>
<input id="todo-input" type="text" placeholder="新增待辦事項">
<button id="add-btn">新增</button>
<ul id="todo-list"></ul>

然後需要撰寫JavaScript來實現核心邏輯。使用者點擊「新增」按鈕後，應該將輸入框中的值顯示在清單中，並且每次新增後會清空輸入框。為此，我們要監聽新增按鈕的點擊事件，取得輸入框的值，然後動態生成一個新的待辦事項。

document.getElementById("add-btn").addEventListener("click", function() {
    const input = document.getElementById("todo-input").value;
    if (input.trim()) {  // 確保輸入不是空白
        addItem(input);
        document.getElementById("todo-input").value = "";  // 清空輸入框
    }
});

function addItem(text) {
    const li = document.createElement("li");
    li.textContent = text;
    document.getElementById("todo-list").appendChild(li);
}

在這段程式碼中，我們建立了 addItem 函數，這個函數負責動態創建 li 元素，並將輸入的文字設置為 li 的內容。然後我們再把這個 li 加到顯示清單中。